<template>
  <div class="btn-bar clearfix">
    <div class="fl select">
      <CheckButton :isChecked="isSelectAll" @click.native="handleClick" />
      <span class="selectall">全选</span>
      <span>{{'合计: Y' + totalPrice}}</span>
    </div>
    <div @click="calcClick" class="fr pay">去计算({{totalCount}})</div>
  </div>
</template>

<script>
import CheckButton from "@/components/content/checkButton/CheckButton.vue";
export default {
  name: "cart-bottom-bar",
  components: {
    CheckButton
  },
  computed: {
    totalPrice() {
      return this.$store.state.cartList
        .filter(item => {
          return item.isChecked;
        })
        .reduce((pre, item) => {
          return pre + item.price * item.count;
        }, 0)
        .toFixed(2);
    },
    totalCount() {
      return this.$store.state.cartList
        .filter(item => {
          return item.isChecked;
        })
        .reduce((pre, item) => {
          return pre + item.count;
        }, 0);
    },
    isSelectAll() {
      return this.$store.state.cartList.length === 0
        ? false
        : this.$store.state.cartList.every(item => {
            return item.isChecked;
          });
    }
  },
  methods: {
    handleClick() {
      if (this.isSelectAll) {
        this.$store.state.cartList.forEach(element => {
          element.isChecked = false;
        });
      } else {
        this.$store.state.cartList.forEach(element => {
          element.isChecked = true;
        });
      }
    },
    calcClick() {
      if (!this.isSelectAll) {
        this.$toast.show("请选择购买的商品", 2000);
      }
    }
  }
};
</script>

<style scoped>
.btn-bar {
  height: 41px;
  background: #f1eeef;
  position: relative;
  z-index: 3;
}
.select {
  display: flex;
  padding-left: 15px;
  height: 100%;
  align-items: center;
}
.selectall {
  margin: 0 10px 0 5px;
}
.pay {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  background: var(--color-high-text);
  color: #fff;
}
</style>